<style>
.app-main{
  background: #f5f9ff;
}
#s{
  border-bottom-style:solid;
  border-width:1px;
  border-bottom-color: #939598;
  font-size: 15px;
  padding-top: 20px;
  padding-left: 22px;
  padding-bottom: 20px;
}
#s1{

  background: #2361bf;
  padding-left:5px;
  margin-right: 30px;

}
table{
  margin-left: 30px;
}
td{
  width: 350px;
  height: 50px;
}

#a1{
  margin: auto;
  margin-top: 20px;
  border-radius:5px;
  width: 1200px;
  height: 260px;
  background: #FFFFFF;
}
#a2{
  margin: auto;
  margin-top: 20px;
  border-radius:5px;
  width: 1200px;
  height: 200px;
  background: #FFFFFF;
}
#a3{
  margin: auto;
  margin-top: 20px;
  border-radius:5px;
  width: 1200px;
  height: 430px;
  background: #FFFFFF;
}

.s{
  width: 400px;
  height: 120px;
  float:left;
  padding-left: 40px;
}

.s1{
  width: 600px;
  height: 100px;
  padding-left: 40px;
}

.z{
  float:left;
  padding-left: 20px;
}


#a4{
  margin: auto;
  margin-top: 20px;
  border-radius:5px;
  width: 1200px;
  height: 100px;
  background: #FFFFFF;
}

.a4{
  float:right;
  padding: 40px;
}
</style>

<template>
  <div >
    <div id="a1">
      <p id="s"><span id="s1"></span>费用信息</p>
      <table>
        <tr>
          <td>应付单号：{{form.payableOrderNo}}</td>
          <td>运单号：{{form.waybillNo}}</td>
          <td>运输成本：{{form.transportationCost}}元</td>
          <td>包装费：{{form.packagingFee}}元</td>
        </tr>
        <tr>
          <td>装卸费：{{form.handlingFee}}元</td>
          <td>其他费用：{{form.otherFees}}元</td>
          <td>成本合计：元</td>
          <td>成本合计：{{form.transportationCost+form.packagingFee+form.packagingFee+form.handlingFee+form.otherFees}}元</td>
        </tr>
      </table>
    </div>
    <div id="a2">
      <p id="s"><span id="s1"></span>应收</p>
      <table>
        <tr>
          <td>现付：{{form.cashOnDelivery}}元</td>
          <td>预付：{{form.prepaid}}元</td>
          <td>到付：{{form.collectOnDelivery}}元</td>
          <td>周期付：{{form.periodicPayment}}元</td>
        </tr>
        <tr>
          <td>应收合计：元</td>
          <td>应收合计：{{form.cashOnDelivery+form.prepaid+form.collectOnDelivery}}元</td>
        </tr>
      </table>
    </div>

    <div id="a3">
      <p id="s"><span id="s1"></span>实收</p>
      <el-form ref="form" :model="form">
      <span class="s">
              <el-form-item label="现付" class="z" >
              <el-input v-model="cash" placeholder="请输入内容" clearable></el-input>
              </el-form-item>
      </span>
        <span class="s">
             <el-form-item label="预付" class="z" >
              <el-input v-model="pre" placeholder="请输入内容" clearable></el-input>
              </el-form-item>
      </span>
        <span class="s">
             <el-form-item label="到付" class="z" >
              <el-input v-model="coll" placeholder="请输入内容" clearable></el-input>
              </el-form-item>
      </span>
        <span class="s">
         <el-form-item label="周期付" class="z" >
              <el-input  clearable :disabled="true" ></el-input>
              </el-form-item>
      </span>
        <span class="s">
             <el-form-item label="实收合计" class="z" >
              <el-input  clearable :disabled="true" ></el-input>
              </el-form-item>
      </span>
        <p class="s1">
          <el-form-item label="备注" class="z">
            <el-input type="textarea"></el-input>
          </el-form-item>
        </p>
      </el-form>
    </div>

    <div id="a4">
      <div class="a4">
        <el-button @click="fan">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>

    </div>
  </div>
</template>
<script>
  import {getYfd, updateYfd} from "@/api/yfd/yfd";

  export default {
    data() {
      return {
        form: {},
        cash: null,
        pre: null,
        coll: null,
      }
    },
    methods: {
      findYfd() {
        var id = this.$route.query.ids;
        getYfd(id).then(response => {
          this.form = response.data;
        });

      },
      fan() {
        this.$router.push({path: "/yfd"})
      },
      submitForm() {
        this.$refs["form"].validate(valid => {
          this.form.cashOnDelivery = this.cash;
          this.form.prepaid = this.pre;
          this.form.collectOnDelivery = this.coll;
          if (valid) {
            if (this.form.id != null) {
              updateYfd(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.$router.push({path: '/yfd'})
              });
            }
          }
        });
      },

    },

    created(){
        this.findYfd();
    },

  }

</script>
